<template>
	<view class="action">
		<view class="auctionContent">
			<view class="au-item" v-for='cu in cuIconList' :key="cu.status" @click="tabChange">
				<view style="position: relative;">
					<image :src="cu.cuIcon" mode="aspectFit" class="bidIcon"></image>
					<view class="au-bage" v-if="cu.badge != 0">
						<block>{{cu.badge > 99 ? "99+" : cu.badge}}</block>
					</view>
				</view>
				<text>{{cu.name}}</text>
			</view>
		</view>
	</view>
</template>
	
<script>
import {fetchUserInfo} from '@/api/my/my.js';

import status_active_1 from 'static/tabs/status_active_1.png';
import status_active_2 from 'static/tabs/status_active_2.png';
import status_active_3 from 'static/tabs/status_active_3.png';
import status_active_4 from 'static/tabs/status_active_4.png';
import status_active_5 from 'static/tabs/status_active_5.png';
export default{
	data() {
		return {
			cuIconList: [
				{
					cuIcon: status_active_1,
					badge: 0,
					name:'待开拍',
					status:1
				},{
					cuIcon: status_active_2,
					badge: 0,
					name:'竞价中',
					status:2
				},{
					cuIcon: status_active_3,
					badge: 0,
					name:'已结束',
					status:3
				},{
					cuIcon: status_active_4,
					badge: 0,
					name:'已拍下',
					status:4
				},{
					cuIcon: status_active_5,
					badge: 0,
					name:'提货订单',
					status:5
				}
			]	
		}
	},
	onShow() {
		this.getTabNumber()
	},
	methods: {
		async getTabNumber() {
		let {data} =  await fetchNumber()
		this.cuIconList = [
			{
				cuIcon: status_active_1,
				badge: data.waitStartNum,
				name:'待开拍',
				status:1
			},{
				cuIcon: status_active_2,
				badge: data.startingNum,
				name:'竞价中',
				status:2
			},{
				cuIcon: status_active_3,
				badge: data.finishNum,
				name:'已结束',
				status:3
			},{
				cuIcon: status_active_4,
				badge: data.hasTakeNum,
				name:'已拍下',
				status:4
			},{
				cuIcon: status_active_5,
				badge: data.takeGoodsNum,
				name:'提货订单',
				status:5
			}
		]

		}
	}
};
</script>

<style lang="scss">
.action {
	min-height: 100vh;
	background-color: #212121;
	overflow:hidden;
}
.auctionContent {
	display: flex;
	justify-content: space-around;
	font-size: 12px;
	margin-top: 8px;
	margin-bottom: 33px;
	color: #c4c4c4;
	.au-item {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		height: 44px;
		image {
			width: 40rpx;
			height: 40rpx;
		}
		.au-bage {
			position: absolute;
			top: -8px;
			right:-12px;
			width: 18px;
			height: 18px;
			border-radius: 50%;
			text-align: center;
			background-color: red;
			color: #fff;
		}
	}
}
</style>